<route lang="json5" type="page">
// @formatter:off
{
  style: {
    navigationBarTitleText: '登录示例',
    // navigationStyle: 'default', // custom default
  }
}
 // @formatter:on
</route>

<script setup lang="ts">
import { getUserInfoApi, loginApi } from '@/api/loginApi'
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'

const store = useUserStore()
const { userInfo } = storeToRefs(store)

// 登录请求
const login = () => {
  loginApi({
    username: 'uni_fteam',
    password: 'uni_fteam@123',
  })
}

// 获取 列表数据
const info = ref()
const error = ref()
const getUserInfo = async () => {
  info.value = {}
  info.value = await getUserInfoApi()
}

// token 失效
const accessTokenInvalid = () => {
  const str = userInfo.value.accessToken.split('')
  store.setUserInfo({
    accessToken: [...str].sort(() => Math.random() - 0.5).join(''),
  })
}

// refreshToken 失效
const refreshTokenInvalid = () => {
  const str = userInfo.value.refreshToken.split('')
  store.setUserInfo({
    refreshToken: [...str].sort(() => Math.random() - 0.5).join(''),
  })
}
</script>

<template>
  <view class="m16px">
    <button @click="login">登录请求</button>
    <view class="my-2 h-80rpx flex items-center justify-center font-size-26rpx">
      【 accessToken 失效,有 refreshToken 获取信息会无感刷新】
    </view>
    <button @click="getUserInfo">获取用户信息</button>
    <button @click="accessTokenInvalid">accessToken 失效</button>
    <button @click="refreshTokenInvalid">refreshToken 失效</button>
    <view class="mt-40rpx flex flex-col items-center justify-center">
      <view>----- accessToken -----</view>
      <view class="mt-20rpx w-80vw break-words">{{ userInfo.accessToken }}</view>
      <view class="mt-40rpx">----- refreshToken -----</view>
      <view class="mt-20rpx w-80vw break-words">{{ userInfo.refreshToken }}</view>
      <view class="m-y-20rpx">----- 用户数据 -----</view>
      <view>{{ info }}</view>
      <view>{{ error }}</view>
    </view>
  </view>
</template>

<style scoped lang="scss">

</style>
